<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<title>Example work with content controls</title>
        
		<style type="text/css">
			html, body {
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				width:100%;
				height:100%;
			}
			.label-hovered	{
				background: rgba(200, 200, 200, 0.5);
			}
			.label-selected	{
				background: #aaa;
			}
			.label-info {
				cursor: pointer;
			}
		</style>

		<link rel="stylesheet" href="../plugins.css">
  
		<script type="text/javascript" src="../pluginBase.js"></script>
		<script type="text/javascript" src="code.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
		
    </head>
    <body>
		<div style="box-sizing: border-box; border:1px solid; margin:5px; max-height: 240px; height: 240px; display: flex; flex-flow: column; justify-content: space-between;">
			<div id="divG" style="display:flex; flex-flow:column; max-height: 200px; height: 200px; border-bottom: 1px solid black; overflow: auto;"></div>
			<div style="display:flex; justify-content:center;">
				<button class="btn-text-default primary" style="margin:5px; min-height: 30px; width: fit-content" id="buttonIDPaste">Past "Test paste for document"</button>
			</div>
		</div>
		<label style="margin:5px">Selected:</label>
		<div id="divS" style="box-sizing: border-box; border:1px solid; margin:5px; max-height: 100px; height: 100px; overflow: auto;"></div>
		<div style="box-sizing: border-box; border:1px solid; margin:5px; max-height: 240px; height: 240px; display: flex; flex-flow: column; justify-content: space-between;">
			<div id="divP" style="display:flex; flex-flow:column; max-height: 200px; height: 200px; border-bottom: 1px solid black; overflow: auto;"></div>
			<div style="display:flex; justify-content:center;">
				<button class="btn-text-default primary" style="margin:5px; min-height: 30px; width:fit-content" id="buttonIDGetAll">Get All Content Controls</button>
				<button class="btn-text-default primary" style="margin:5px; min-height: 30px; width: fit-content" id="buttonIDShowCurrent">Select Current Content Controls</button>
			</div>
		</div>
    </body>
</html>